<template>
  <div>
    <div v-if="(this.$props.statusType===1||this.$props.statusType===4)" class="detail-info-box tab-card">
      <ul>
        <li>
          <p class="card-title"><i class="icon maliiconfont maliicon-img_details_allocati1"></i><span>入库仓库</span></p>
          <p>{{this.responseData.storageName}}</p>
        </li>
        <li>
          <p class="card-title"><i class="icon maliiconfont maliicon-img_details_figure"></i><span>联系人姓名</span></p>
          <p>{{this.responseData.storageContactName}}</p>
        </li>

        <li>
          <p class="card-title"><i class="icon maliiconfont maliicon-img_details_relation"></i><span>联系人电话</span></p>
          <p>{{this.responseData.storageContactPhone}}</p>
        </li>

        <li>
          <p class="card-title"><i class="icon maliiconfont maliicon-img_details_figure"></i><span>司机姓名</span></p>
          <p>{{this.responseData.driverName}}</p>
        </li>
        <li>
          <p class="card-title"><i class="icon maliiconfont maliicon-img_details_relation"></i><span>司机电话</span></p>
          <p>{{this.responseData.driverPhone}}</p>
        </li>
        <li>
          <p class="card-title"><i class="icon maliiconfont maliicon-img_details_calendar"></i><span>入库日期</span></p>
          <p>{{this.responseData.instoreDate}}</p>
        </li>
        <li>
          <p class="card-title"><i class="icon maliiconfont maliicon-img_details_cargo1"></i><span>柜号</span></p>
          <p>{{this.responseData.cntrNo}}</p>
        </li>
      </ul>
    </div>
    <div style="width: 948px;margin-left: 10px">
      <egrid border
             max-height="500"
             :column-key-map="{ label: 'name' }"
             :data="this.responseData.instoreDetails"
             :columns="columns"
             propSpan="date"
             :columns-schema="columnsSchema"
             :columns-props="columnsProps"
             :columns-handler="columnsHandler"
             @selection-change="selectionChange">
      </egrid>
    </div>

    <!--<file-upload  :headTitle="'提交入库录单资料'" :headSonTitle="'支持pdf,jpg,png,gif,bmp,xls,xlsx,csv,doc,docx'" @getFileUrls="getFileUrls" ></file-upload>-->
    <div class="fileFrameClass">
      <div class="fileHeadTitle">
        <div class="headTitleClass">
          <span>提交入库指令资料</span>
        </div>
        <div class="headSonTitleClass">
          <span>支持pdf,jpg,png,gif,bmp,xls,xlsx,csv,doc,docx</span>
        </div>
      </div>
    </div>

    <div v-if="(this.$props.statusType===1||this.$props.statusType===4)">
      <file-view :isBottom="this.isBottomscanFiles" :headTitle="'抄码单'" v-if="this.responseData.scanFiles.length!==0" :fileUrlsArray ="this.responseData.scanFiles"></file-view>
      <file-view :isBottom="this.isBottomdeclarationFiles" :headTitle="'报关单'" v-if="this.responseData.declarationFiles.length!==0" :fileUrlsArray ="this.responseData.declarationFiles"></file-view>
      <file-view :isBottom="this.isBottominspectionFiles" :headTitle="'商检单'" v-if="this.responseData.inspectionFiles.length!==0" :fileUrlsArray ="this.responseData.inspectionFiles"></file-view>
      <file-view :isBottom="this.isBottombatchFiles" :headTitle="'生产批次单'" v-if="this.responseData.batchFiles.length!==0" :fileUrlsArray ="this.responseData.batchFiles"></file-view>
    </div>

    <div v-if="this.$props.statusType===4" class="noteClass">
      <div class="singleNoteClass">
        <span>{{this.responseData.ownerRemark}}</span>
      </div>
      <div class="singleNoteClass">
        <span>{{this.responseData.customerRemark}}</span>
      </div>
      <div class="singleNoteClass">
        <span>{{this.responseData.cancelReason}}</span>
      </div>
    </div>
    <div v-else class="noteClassConfirm">
      <div class="singleNoteClass">
        <span>{{this.responseData.ownerRemark}}</span>
      </div>
      <div class="singleNoteClass">
        <span>{{this.responseData.customerRemark}}</span>
      </div>
    </div>

  </div>
</template>
<script>
  import inputCom from 'components/input/baseTitleInput.vue';
  import fileUpload from 'components/fileUpload/file.vue';
  import editPic from '../instoreAdd/editPicture.vue';
  import PcDialog from 'components/dialog';
//  import Btn from 'src/components/Egrid/cell-viewPic-btn.vue';
  import Data from 'src/components/Egrid/data';
  import fileView from 'src/components/fileUpload/fileView.vue';
  export default {
    components: {
      editPic,
      inputCom,
      fileUpload,
      PcDialog,
      Data,
      fileView
    },
    props: {
      roleType: {
        type: Number
      },
      isAdditionalInformation: {
        type: Boolean
      },
      statusType: {
        type: Number  // 1 待确认 已取消 2 待入库 已入库
      },
      detailId: {
        type: String
      }
    },
    data() {
      return {
        columnsWidth: '',
        columns: [
          {name: '货物名称', prop: 'goodsName', merge: true},
          {name: '计划入库数量', prop: 'planCount'},
          {name: '计划入库重量(kg)', prop: 'planWeight'}
        ],
        // columnsProps 用于定义所有 columns 公共的属性，
        // 这里属性可以参考这里： http://element.eleme.io/#/zh-CN/component/table#table-column-attributes
        columnsProps: {
          width: 316
          // 定义表格列如何渲染
//          component: Editor
        },
        // columnsSchema 可以用来单独定义 columns 的某一列，这里的设置会覆盖 columnsProps 的配置属性
        columnsSchema: {
        },
        selecetedRows: [],
        propsSpan: ['date'],
        isBottomscanFiles: false,
        isBottomdeclarationFiles: false,
        isBottominspectionFiles: false,
        isBottombatchFiles: true,
        responseData: {
          batchFiles: [],  // 生产批次单数组
          cancelReason: '',
          clerkName: '',
          cntrNo: '',
          customerRemark: '',
          declarationFiles: [], // 报关单数组
          driverName: '',
          driverPhone: '',
          contactName: '',
          contactPhone: '',
          storageContactName: '',
          storageContactPhone: '',
          findOrderNo: '',
          id: 0,
          inspectionFiles: [],  // 商检单数组
          instoreDate: '',
          instoreDetails: [
            {
              actCount: 0,
              actWeight: 0,
              checkImg: [],
              countryOrigin: '',
              goodsName: '',
              id: 0,
              markImg: [],
              packageName: '',
              planCount: 0,
              planWeight: 0,
              productDate: '',
              unitName: '',
              vendor: ''
            }
          ],
          instoreFiles: [], // 入库单数组
          instoreOrderNo: '3445',
          ownerName: '马力测试',
          ownerRemark: '货主备注: 测试',
          resource: '',
          scanFiles: [], // 抄码单数组
          status: '',
          storageName: ''
        }
      };
    },
    created() {
      this.getDataInfo();
    },
    methods: {
      getDataInfo() {
        this.ajax({
          type: 'GET',
          url: '/tyywms/instore/instoreDetail/' + this.$props.detailId,
          loading: true,
          success: (res) => {
            setTimeout(() => {
              this.$pcNProgress.done();
            }, 300);
            this.responseData = res.result;
            this.responseData.cancelReason = '取消原因: ' + this.responseData.cancelReason;
            this.responseData.ownerRemark = '货主备注: ' + this.responseData.ownerRemark;
            this.responseData.customerRemark = '客服备注: ' + this.responseData.customerRemark;
            if (this.responseData.batchFiles.length !== 0) {
              this.isBottombatchFiles = true;
            } else {
              if (this.responseData.inspectionFiles.length !== 0) {
                this.isBottominspectionFiles = true;
              } else {
                if (this.responseData.declarationFiles.length !== 0) {
                  this.isBottomdeclarationFiles = true;
                } else {
                  if (this.responseData.scanFiles.length !== 0) {
                    this.isBottomisBottomscanFiles = true;
                  }
                }
              }
            }
          }
        });
      },
      selectionChange (rows) {
        this.selecetedRows = rows;
      },

      clearSelection () {
        const { egrid } = this.$refs;
        if (egrid && egrid.clearSelection) {
          egrid.clearSelection();
        }
      }
    }
  };
</script>
<style scoped>
  .addForm{
    margin-top:10px;
    margin-left: -30px;
    /*width:1000px;*/
  }
  .el-form-item .el-form-item__error {
    /*padding-top: 36px;*/
    /*margin-left: -60px;*/
  }
  .btnFrameClass
  {
    margin-left: 350px;
    margin-top: 40px;
    margin-bottom: 20px;
  }
  .singleBtnClass
  {
    width: 140px;
    height: 40px;
  }
  .detail-info-box{
    width: 948px;
    box-sizing: border-box;
    margin-left: 10px;
    margin-bottom: 20px;
    border: 1px solid #e5e5e5;
    border-right: none;
    border-bottom: none;
    background-color: #fff;
    /*box-shadow:0 15px 20px -2px rgba(19,120,242,0.20);*/
    overflow: hidden;
  }
  .detail-info-box .title {
    font-size: 16px;
    color: #333;
    line-height: 60px;
    position: relative;
    padding-left: 20px;
    border-bottom:1px solid #e5e5e5;
  }
  .detail-info-box .title i {
    padding-right: 10px;
  }
  .tab-card ul li {
    width: 33.333333333%;
    height: 100px;
    box-sizing: border-box;
    float: left;
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    padding: 15px 18px;
    background: #fff;
  }

  .tab-card ul li .card-title {
    margin-bottom: 10px;
  }
  .tab-card i.icon {
    color: #ff6c2b;
    font-size: 18px;
    margin-right: 10px;
    vertical-align: middle;
  }
  .tab-card i.icon {
    font-size: 20px;
  }
  .tab-card ul li .card-title span {
    color: #808080;
    vertical-align: middle;
    font-size: 14px;
  }
  .noteClass
  {
    width: 948px;
    margin-left: 10px;
    margin-bottom: 20px;
    height: 90px;
    background: white;
    margin-top: 20px;
    border: 1px solid #e5e5e5;
  }
  .noteClassConfirm
  {
    width: 948px;
    margin-left: 10px;
    margin-bottom: 20px;
    height: 65px;
    background: white;
    margin-top: 20px;
    border: 1px solid #e5e5e5;
  }
  .singleNoteClass
  {
    color: #333333;
    margin-left: 10px;
    font-size: 16px;
    margin-top: 10px;
  }
  .fileFrameClass
  {
    width: 948px;
    margin-left: 10px;
    margin-bottom: 20px;
    height: 80px;
    background: white;
    margin-top: 20px;
    border: 1px solid #e5e5e5;
    border-bottom: none;
  }
  .fileHeadTitle
  {
    width: 948px;
    height: 60px;
    border-bottom: 1px dashed #e5e5e5;
  }
  .headTitleClass
  {
    margin-left: 20px;
    margin-top: 20px;
    font-size: 14px;
    color: #333333;
  }
  .headSonTitleClass
  {
    margin-left: 20px;
    margin-top: 10px;
    height: 30px;
    font-size: 12px;
    color: #b2b2b2;
  }
</style>
